<template>
  <div class="statistics-section">
    <Title title="统计数据" />
    <div class="statistics">
      <div class="statistics-item">
        <img src="/img/statistics-today.png" alt="" />
        <div class="item-content">
          <div class="content-num">
            <count-up :startVal="0" :end-val="statisticsData[0].value" :duration="2.5"></count-up>
          </div>
          <div class="content-text">今日侦测架次</div>
        </div>
      </div>
      <div class="statistics-item">
        <img src="/img/statistics-all.png" alt="" />
        <div class="item-content">
          <div class="content-num">
            <count-up :startVal="0" :end-val="statisticsData[1].value" :duration="2.5"></count-up>
          </div>
          <div class="content-text">历史侦测架次</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue'
  import Title from '@/components/home/title.vue'
  import CountUp from 'vue-countup-v3'
  import { getMonite } from '@/api/home.js'

  import { useDroneStore } from '@/stores/mqttInfo'
  const droneStore = useDroneStore()

  const separator = ''
  watch(
    droneStore.newflystate,
    (newValue) => {
      console.log('改变侦测数据要加1')
      setTimeout(() => {
        add()
      })
    },
    {
      deep: true,
    }
  )
  let statisticsData = ref([{ value: 0 }, { value: 0 }])
  /**
   * @description: 侦测数据
   */
  const getstatisticsData = async () => {
    const res = await getMonite()
    if (res.code == 200) {
      statisticsData.value = res.data
    }
  }

  /**
   * @description: 当有推送了数据是加1
   * @return {*}
   */
  const add = () => {
    statisticsData.value[0].value = Number(statisticsData.value[0].value) + 1
    statisticsData.value[1].value = Number(statisticsData.value[1].value) + 1
  }

  onMounted(() => {
    getstatisticsData()
  })
</script>

<style scoped lang="scss">
  .statistics-section {
    position: relative;
    width: 100%;
    height: 20%;
    .statistics {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 3% 0;
      .statistics-item {
        display: flex;
        align-items: center;
        .item-content {
          .content-num {
            font-family: DigifaceWide;
            font-size: 20px;
            color: #ffffff;
            background: linear-gradient(0deg, #46cdff 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .content-text {
            font-size: 12px;
            color: #ffffff;
          }
        }
      }
    }
  }
</style>
